import React from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar, Divider, Button } from 'antd-mobile';
import '../../css/yjh/Apps.css'
import { useLocation } from 'react-router-dom'
export default function ConfirmPage() {

  const location = useLocation()
  const { totalprice } = location.state
  const navgiter = useNavigate()
  const back = () => {
    navgiter('/pays')
  }
  const pays = () => {
    navgiter('/pay',{state: {totalprice:totalprice,}})
  }

  const payss = JSON.parse(localStorage.getItem('selectedPay'));
  const paysss = JSON.parse(localStorage.getItem('selectedCoupon'));

  const serviceDetails = {
    serviceContent: '房屋清洁',
    serviceType: '清洁服务',
    servicePerson: '王小小',
    serviceTime: '2024年12月23日|11:00AM',
    workingHours: '2 小时',
  };

  const pricess = Number((totalprice * paysss.price).toFixed(1));

  return (
    <div>
      <NavBar back='订单确认' onBack={back} />
      <div className='contexts'>
        <div><p className='p2'>服务内容</p><p  className='p4'>{serviceDetails.serviceContent}</p></div>
        <div><p className='p2'>服务类型</p><p  className='p4'>{serviceDetails.serviceType}</p></div>
        <div><p className='p2'>服务人员</p><p  className='p4'>{serviceDetails.servicePerson}</p></div>
        <div><p className='p2'>服务时间</p><p  className='p4'>{serviceDetails.serviceTime}</p></div>
        <div><p className='p2'>工作时间</p><p  className='p4'>{serviceDetails.workingHours}</p></div>
      </div>

      <Divider />

      <div className='contextss'>
        <div><p className='p2'>房屋清洁</p><p className='p4' >{totalprice}</p></div>
        <div><p className='p2'>优惠</p><p className='p3'>-{totalprice - totalprice * paysss.price}</p></div>
        <div><p className='p2'>总计</p><p  className='p4'>{pricess}</p></div>
      </div>

      <Divider />

      <div className='selectss'>
        <div><p className='p3'>{payss.name}</p><p className='p3'>更换</p></div>
      </div>

      <Divider />

      <div className='Yes'>
        <Button onClick={pays}>确认支付</Button>
      </div>


    </div>
  )
}
